import { defineAsyncComponent, AsyncComponentLoader,hydrateOnVisible } from "vue";
import AsyncLoading from "/@/components/Loading/index.vue";
import AsyncError from "/@/components/Loading/error.vue";

import { app } from "/@ts/main";
/**
 * window 动态注册组件
 */
export const windowComponentInstall = <T>(key: string, node: T) => {
  if (!window["$vue"].component(key) && node) {
    window["$vue"].component(key, node);
  }
};
/**
 * * 动态注册组件
 */
export const componentInstall = (
  key: string,
  module: string,
  loader: AsyncComponentLoader<any>
) => {
  //组件名字
  const componentName = module + capitalizeFirstLetter(key);
  // 检查组件是否已注册
  const componentConfig = app.component(componentName);

  if (componentConfig) {
    console.error("组件已注册", componentName);
  } else {
    app.component(module + capitalizeFirstLetter(key), loader);
  }
};
/**
 * * 异步加载组件
 * @param loader
 * @returns
 */
export const loadAsyncComponent = (loader: AsyncComponentLoader<any>) => {
  /**
loader：是一个函数，用于加载组件，这里使用 import('./AsyncComponent.vue') 来加载。
loadingComponent：指定一个组件，当异步组件正在加载时显示该组件。
errorComponent：指定一个组件，当异步组件加载失败时显示该组件。
delay：设置一个延迟时间（毫秒），在这个时间之后如果组件还未加载完成，则显示 loadingComponent。
timeout：设置一个超时时间（毫秒），如果在超时时间内组件未加载完成，会调用 onError 函数。
onError：是一个错误处理函数，根据错误情况决定是否重试加载组件或显示 errorComponent
 */
  return defineAsyncComponent({
    loader,
  
    // 延迟显示 loadingComponent，默认是 200 毫秒
    delay: 20,
    // // 如果加载组件超时，将显示 errorComponent，默认值是 Infinity
    timeout:1000,
    //在可见时激活
    hydrate: hydrateOnVisible(),
    loadingComponent: AsyncLoading,
    errorComponent: AsyncError,
   
  });
};
/**
 * 首字母改成大写
 * @param str 字符串
 * @returns
 */
export const capitalizeFirstLetter = (str) => {
  if (str.length === 0) return str;
  return str.charAt(0).toUpperCase() + str.slice(1);
};

// let str = "javascript";
// console.log(capitalizeFirstLetter(str));
